<template>
    <div v-if="showHeader" :class="{ fixedTop: fixedTop }" ref="headerTop" class="needChangeBgOp">
        <mu-appbar :style="headerStyle" :title="title" :color="color" :textColor="textColor" :pageIndex="pageIndex" class="needChangeBgOp needChangeColor">
            <mu-button icon slot="left" v-if="isBack" @click="goBack()">
                <mu-icon value="chevron_left" class="main-font" size="36"></mu-icon>
            </mu-button>
            <div class="pro-top">
                <!-- 用户 -->
                <div class="pro-top-name">
                    <slot name="myUser">
                        <span>用户：{{ myUser || "未登录" }}</span>
                        <span style="margin-left: 1rem">生产线: {{ workCenter.workCenterCode || "未绑定" }}</span>
                        <span style="margin-left: 1rem">工位: {{ workCell.workCellCode || "未绑定" }}</span>
                    </slot>
                </div>
                <!-- 标题 -->
                <div class="top-title">
                    <slot name="title"></slot>
                </div>
                <!-- 时间 -->
                <div class="top-time">
                    <!-- <slot name="time">{{ timeBox }}</slot> -->
                </div>
                <!-- 其他 -->
                <div class="top-other">
                    <slot name="other">
                        <img style="
                width: 28px !important;
                height: 28px !important;
                margin-bottom: -3%;
              " :title="netWorkStateTitle" :src="netWorkStateIcon_OK" />

                        <!-- <img style="
                width: 28px !important;
                height: 28px !important;
                margin-left: 10px;
                margin-bottom: -3%;
              " :title="fullScreenTitle" :src="fullScreenIcon" @click="fullExitScreen" /> -->
                    </slot>
                </div>
            </div>
        </mu-appbar>
    </div>
</template>

<script>
import storage from "../utils/storage.js";
import http from "../utils/http.js";
import Toast from "muse-ui-toast";
const ToastOption = {
    //position: 'bottom', // 弹出的位置 top / top-start / top-end / bottom / bottom-start / bottom-end
    time: 5000 // 显示的时长
    //closeIcon: 'close', // 关闭的图标
    //close: true, // 是否显示关闭按钮
    //successIcon: 'check_circle', // 成功信息图标
    //infoIcon: 'info', // 信息信息图标
    //warningIcon: 'priority_high', // 提醒信息图标
    //errorIcon: 'warning' // 错误信息图标
};
Toast.config(ToastOption);
export default {
    name: "SafeHeader",
    filters: {
        //定义过滤器
        ellipsis(value) {
            if (!value) return "";
            if (value.length > 8) {
                return value.slice(0, 4) + "..." + value.slice(6, 10);
            }
            return value;
        }
    },
    props: {
        title: {
            type: String,
            default: () => {
                return "标题";
            }
        },
        pageIndex: {
            type: Number,
            default: () => {
                return 0;
            }
        },
        color: {
            // color和textColor 的设置，参照 https://muse-ui.org/#/zh-CN/color
            type: String,
            default: () => {
                return "";
            }
        },
        textColor: {
            type: String,
            default: () => {
                return "";
            }
        },
        fixedTop: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        isBack: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        showTheme: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        showThemeNew: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        themeIndex: {
            type: Number,
            default: () => {
                return 0;
            }
        },
        backIconColor: {
            type: String,
            default: () => {
                return "";
            }
        }
    },
    data: () => {
        return {
            themeIcon: require("../assets/img/theme.png"),
            paddingTop: 0,
            //-------主页面数据--------
            myUser: "", //标题头用户信息
            workClassArr: [], //班次数组
            workCenterArr: [],
            workCellArr: [],
            workClass: { workClassId: "", workClassCode: "" }, //班次
            workCenter: { workCenterId: "", workCenterCode: "" }, //工作中心
            workCell: { workCellId: "", workCellCode: "" }, //绑定的工位ID/CODE
            timeBox: "0000-00-00",
            netWorkStateTitle: "网络通畅",
            netWorkStateIcon_OK: require("../assets/img/netWork-OK.png"),
            fullScreenTitle: "全屏",
            fullScreenIcon: require("../assets/img/fullsCcreen3.png"),
            showHeader: true, //是否展示标题栏
            bg0: require("../assets/img/bg0.png"),
            bg1: require("../assets/img/bg1.png"),
            bg2: require("../assets/img/bg2.png"),
            bg3: require("../assets/img/bg3.png")
        };
    },
    computed: {
        headerStyle() {
            return {
                paddingTop: this.paddingTop + "px",
                height: this.paddingTop + 30 + "px"
            };
        }
    },
    methods: {
        goBack() {
            //页码pageIndex>0 表示当前所在页为子组件页 点击 < 返回按钮触发的方法
            if (this.pageIndex && parseInt(this.pageIndex) > 0) {
                let item = {};
                item.type = 1; //跳转到第一页
                this.$emit("clickEvent", item, "");
            } else {
                window.api.closeWin();
            }
        },
        // 发送请求:获取工作中心
        getWorkCenter() {
            // 请求参数:获取工位
            let form = new FormData();
            form.append("workCellId", this.workCell.workCellId);
            form.append("workCellCode", this.workCell.workCellCode);

            http.post({
                url: "productPadCommController!getWorkCenter.m",
                data: form
            }).then(res => {
                if (res.status == 200 && res.data.erroCode == 0) {
                    if (res.data.data) {
                        let resData = JSON.parse(res.data.data);
                        this.workCenterArr = resData;
                        this.workCenter.workCenterId = resData[0].id;
                        this.workCenter.workCenterCode = resData[0].code;
                        localStorage.setItem("workCenterId", resData[0].id);
                    }
                } else {
                    Toast.error({
                        message: res.data.msg,
                        close: false,
                        position: "bottom"
                    });
                }
            });
        },
        //发送请求:获取班次
        getClasses() {
            http.post({ url: "productPadCommController!getUdiClasses.m" }).then(
                res => {
                    if (res.status == 200 && res.data.erroCode == 0) {
                        if (res.data.data) {
                            let resData = JSON.parse(res.data.data);
                            this.workClassArr = resData;
                            this.workClass.workClassId = resData[0].id;
                            this.workClass.workClassCode = resData[0].name;
                        }
                    } else {
                        Toast.error({
                            message: res.data.msg,
                            close: false,
                            position: "bottom"
                        });
                    }
                }
            );
        },
        // 发送请求:获取登录用户
        getCUser() {
            // 请求参数:获取登录人
            let form = new FormData();
            let user = storage.getObject("user");
            form.append("un", user.username); //登录人员

            http.post({
                url: "productPadCommController!getCUser.m",
                data: form
            }).then(res => {
                if (res.status == 200 && res.data.erroCode == 0) {
                    let resData = JSON.parse(res.data.data);
                    // console.log("登录用户 ===="+resData.user);
                    this.myUser = resData.user;
                    storage.setObject("loginName", resData.name);
                } else {
                    Toast.error({
                        message: res.data.msg,
                        close: false,
                        position: "bottom"
                    });
                }
            });
        },
        //获取时间
        formatDate() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let hours = date.getHours();
            let mins = date.getMinutes();
            let sec = date.getSeconds();
            if (month < 10) month = "0" + month;
            if (day < 10) day = "0" + day;
            if (hours < 10) hours = "0" + hours;
            if (mins < 10) mins = "0" + mins;
            if (sec < 10) sec = "0" + sec;
            return (this.timeBox =
                // year +
                // "-" +
                // month +
                // "-" +
                // day +
                // " " +
                hours + ":" + mins + ":" + sec);
        },
        currentTime() {
            setInterval(this.formatDate, 1000);
        },
        //获取登录人员和绑定工位
        initCellAndPerson() {
            let form = new FormData();

            let workCellInfo = storage.getObject("workCells") || [];
            workCellInfo = workCellInfo[0] || {};
            form.append("workCellId", workCellInfo.id || ""); //绑定的工位
            form.append("workCellCode", workCellInfo.code || ""); //绑定的工位

            this.workCell.workCellId = workCellInfo.id || "";
            let value = workCellInfo.code;
            if (value && value.length > 12) {
                this.workCell.workCellCode = value.slice(0, 11);
            } else {
                this.workCell.workCellCode = workCellInfo.code || "";
            }

            let user = storage.getObject("user");
            form.append("un", user.username); //登录人员
            this.myUser = user.username;
            this.person = user.username;
            return form;
        },
        //发送请求:获取网络状态
        currentNetWork() {
            setInterval(this.getNetWorkState, 10000);
        },
        getNetWorkState() {
            http.post({
                url: "productPadCommController!getNetWorkState.m",
                data: new FormData()
            }).then(res => {
                this.netWorkStateIcon_OK = require("../assets/img/netWork-OK.png");
                this.netWorkStateTitle = "网络通畅";
            });
            // .catch(err => {
            //     this.netWorkStateIcon_OK = require("../assets/img/netWork-NO.png");
            //     this.netWorkStateTitle = "网络断开";
            // });
        },
        //全屏切换
        fullExitScreen() {
            let docElm = document.documentElement;
            let explorer = window.navigator.userAgent.toLowerCase();
            if (explorer.indexOf("chrome") > 0) {
                //webkit
                if (
                    document.fullscreenElement ||
                    document.msFullscreenElement ||
                    document.mozFullScreenElement ||
                    document.webkitFullscreenElement
                ) {
                    //退出全屏
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    }
                } else {
                    //全屏
                    //W3C
                    if (docElm.requestFullscreen) {
                        docElm.requestFullscreen();
                    } else if (docElm.mozRequestFullScreen) {
                        //FireFox浏览器
                        docElm.mozRequestFullScreen();
                    } else if (docElm.webkitRequestFullScreen) {
                        //Chrome等浏览器
                        docElm.webkitRequestFullScreen();
                    }
                }
            } else {
                //fireFox浏览器
                if (
                    document.fullscreenElement ||
                    document.msFullscreenElement ||
                    document.mozFullScreenElement ||
                    document.webkitFullscreenElement
                ) {
                    //退出全屏
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    }
                } else {
                    //全屏
                    //W3C
                    if (docElm.requestFullscreen) {
                        docElm.requestFullscreen();
                    } else if (docElm.mozRequestFullScreen) {
                        //FireFox浏览器
                        docElm.mozRequestFullScreen();
                    } else if (docElm.webkitRequestFullScreen) {
                        //Chrome等浏览器
                        docElm.webkitRequestFullScreen();
                    }
                }
            }
        },
        checkIsFull() {
            //是否全屏
            let isFull =
                document.fullscreenElement ||
                document.msFullscreenElement ||
                document.mozFullScreenElement ||
                document.webkitFullscreenElement ||
                document.fullscreenElement ||
                document.msFullscreenElement ||
                document.mozFullScreenElement ||
                document.webkitFullscreenElement;
            //to fix : false || undefined == undefined
            if (isFull === undefined) isFull = false;
            return isFull;
        },
        changeBgImage() {
            //主题变更
            this.$root.api.changeBgImage();
        },
        changeBgImageNew(num) {
            //主题变更
            this.$root.api.changeBgImageNew(num);
        }
    },
    created() {
        let self = this;
        window.onresize = function() {
            if (self.checkIsFull()) {
                //全屏
                self.fullScreenIcon = require("../assets/img/exitCcreen3.png");
                self.fullScreenTitle = "退出全屏";
                // self.showHeader = false;
                // self.$refs.headerTop.nextSibling.style.paddingTop = 0 + "px";
            } else {
                //取消全屏
                //要执行的动作
                self.fullScreenIcon = require("../assets/img/fullsCcreen3.png");
                self.fullScreenTitle = "全屏";
                // self.showHeader = true;
                // setTimeout(() => { //延迟执行
                //   self.$refs.headerTop.nextSibling.style.paddingTop = (self.fixedTop ? self.paddingTop + self.$refs.headerTop.offsetHeight : 0) + "px";
                // }, 0);
            }
        };
    },
    mounted: function() {
        this.paddingTop = window.api ? window.api.safeArea.top : 0;
        this.$refs.headerTop.nextSibling.style.paddingTop =
            (this.fixedTop
                ? this.paddingTop + this.$refs.headerTop.offsetHeight
                : 0) + "px";
        //获取登录人员和绑定工位
        this.initCellAndPerson();
        //时间定时器
        this.currentTime();
        //获取产线下拉框
        this.getWorkCenter();
        //获取班次下拉框
        // this.getClasses();
        //获取当前登陆人信息
        this.getCUser();
        //获取网络状态
        this.currentNetWork();
        //默认主题背景
        if (this.themeIndex && this.themeIndex > 0) {
            this.changeBgImageNew(this.themeIndex);
        }
    }
};
</script>

<style scoped lang="scss">
::v-deep .mu-appbar-title {
    font-size: 14px;
    margin-left: -20px;
    padding: unset;
}
.mu-appbar {
    width: 100%;
}
.fixedTop {
    position: fixed;
    width: 100%;
    background: #fff;
    z-index: 100;
}
.fixedTop + * {
    padding-top: 80px;
}
.mu-appbar-title {
    text-align: center;
    margin-right: 2rem;
}
//插槽DIV布局 行内块显示
.pro-top div {
    display: inline-block;
    height: 100%;
}

//顶部样式
.pro-top {
    position: relative;
    width: 100%;
    height: 10%;
    min-height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: 14px;
    //返回按钮
    .pro-top-back {
        position: absolute;
        width: 5%;
        left: 0%;
    }
    //登录用户编码
    .pro-top-name {
        position: absolute;
        top: 0;
        left: 1%;
        font-size: 14px;
        text-align: left;
    }
    //登录班次|产线|工位
    .pro-top-workInfo {
        position: absolute;
        width: 40%;
        top: 0;
        left: 17%;
        font-size: 14px;
        .top-divide {
            width: 30%;
            height: 100%;
            margin-left: 3%;
        }
    }
    //标题头
    .top-title {
        position: absolute;
        width: 20%;
        height: 100%;
        left: 65%;
        font-size: 14px;
        font-weight: 400;
    }
    //时间
    .top-time {
        position: absolute;
        height: 100%;
        right: 5%;
        font-size: 14px;
        font-weight: 400;
    }
    .top-other {
        position: absolute;
        right: 0%;
        height: 100%;
        font-size: 14px;
    }
}
</style>

